<!--
 * @Description: 文件描述
 * @Author: 程前
 * @Date: 2024-12-30 11:12:47
 * @LastEditors: 程前
 * @LastEditTime: 2024-12-30 17:36:04
-->
<template>
    <div class="fly-panel">
        <div class="fly-toggle">
            <div class="toggle-item" :class="{ active: selectedMode === 'fixed' }" @click="handleModeChange('fixed')">
                固定姿态
            </div>
            <div class="toggle-item" :class="{ active: selectedMode === 'free' }" @click="handleModeChange('free')">
                自由姿态
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCesiumGlobalStore } from "@/store/modules/cesiun-global"
import { ElMessage } from 'element-plus'
import { freeCameraControl, disableCameraControl } from "@/utils";
const selectedMode = ref('fixed');
const cesiumGlobalStore = useCesiumGlobalStore()

const handleModeChange = (mode: 'fixed' | 'free') => {
    selectedMode.value = mode;
    if (mode === 'free') {
        // freeCameraControl()
        ElMessage.success({
            message: '切换为自由姿态',
            duration: 1000
        });
    } else {
        // disableCameraControl()
        ElMessage.success({
            message: '切换为固定姿态',
            duration: 1000
        });
    }
    cesiumGlobalStore.flyType = mode;
};
</script>

<style scoped lang="less">
.fly-panel {
    padding: 10px;

    .fly-toggle {
        display: flex;
        background: #989ca1a3;
        border-radius: 100px;
        padding: 6px;
        width: fit-content;

        .toggle-item {
            padding: 6px 24px;
            cursor: pointer;
            border-radius: 100px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 16px;
            transition: all 0.3s;
            white-space: nowrap;

            &.active {
                background: #4080ff;
                color: #fff;
            }

            &:not(.active):hover {
                color: #fff;
            }
        }
    }
}
</style>
